<template>
   <el-row
      type="flex"
      justify="space-between"
      style="height: 40px; width: 100%"
      align="middle"
   >
      <el-col>
         <span>{{ treeNode.name }}</span>
      </el-col>
      <el-col :span="4">
         <el-row type="flex" justify="end">
            <el-col>{{ treeNode.manager }}</el-col>
            <el-col>
               <el-dropdown @command="operateDepts">
                  <span class="el-dropdown-link">
                     操作
                     <i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                     <!-- 如果这个方法返回 true 则有权利编辑 -->
                     <el-dropdown-item
                        command="add"
                        :disabled="!checkPermission('POINT-USER-ADD')"
                     >
                        添加子部门
                     </el-dropdown-item>
                     <el-dropdown-item v-if="!isRoot" command="edit">
                        编辑部门
                     </el-dropdown-item>
                     <el-dropdown-item v-if="!isRoot" command="del">
                        删除部门
                     </el-dropdown-item>
                  </el-dropdown-menu>
               </el-dropdown>
            </el-col>
         </el-row>
      </el-col>
   </el-row>
</template>

<script>
import { delDepartments } from '@/api/departments'
export default {
   props: {
      treeNode: {
         type: Object,
         required: true
      },
      isRoot: {
         type: Boolean,
         default: false
      }
   },
   methods: {
      operateDepts(type) {
         if (type === 'add') {
            // 添加子部门
            // 触发事件显示弹层
            // 在当前地点击的部门下添加子部门
            // this.treeNode 就是当前点击的部门
            this.$emit('addDepts', this.treeNode)
         } else if (type === 'edit') {
            // 编辑部门
            this.$emit('editDepts', this.treeNode)
         } else {
            // 删除部门
            this.$confirm('你确定要删除该组织部门吗？')
               .then(() => {
                  return delDepartments(this.treeNode.id)
               })
               .then(() => {
                  this.$emit('delDepts')
                  this.$message.success('删除部门成功')
               })
         }
      }
   }
}
</script>

<style lang="sass" scoped></style>
